<template>
    <home-view />
    <div class="project-management-container">
        <div class="pmc-head">
            <div class="pmc-left-head">
                <img src="../assets/Picture/ProjectManagement/box.png" alt=" " class="pmc-box">
                <h2>“{{ projectName }}”的{{ navText }}列表 </h2>
            </div>
            <div class="pmc-right-head">
                <button class="pmc-small-right-head">
                    <span @click="openCreateDocumentDialog">新建{{ navText }}</span>
                </button>
                <button class="pmc-small-right-head">
                    <span @click="importDocument">导入{{ navText }}</span>
                </button>
                <button class="pmc-small-right-head">
                    <span @click="analyzeAndExport">分析和导出</span>
                </button>
                <button class="pmc-small-right-head">
                    <span @click="returnToProjects">返回项目列表</span>
                </button>
            </div>
        </div>
        <div class="pmc-body">
            <div class="pmc-ul" v-if="documents && documents.length > 0">
                <div v-for="document in documents" :key="document.id" class="pmc-item">
                    <div class="pmc-item-container">
                        <div class="pmc-left-item">
                            <div class="pmc-image"><img src="../assets/Picture/ProjectManagement/document.png" alt=" ">
                            </div>
                            <div class="pmc-name">{{ document.name }}</div>
                        </div>
                        <div class="pmc-right-item">
                            <div class="pmc-date">{{ document.formattedDate }}
                            </div>
                            <div class="pmc-btn">
                                <el-button type="primary" size="small" class="el-button-1"
                                    @click="navigateToDocumentManagementView(document)">打开文档</el-button>
                                <el-button type="info" size="small" class="el-button-2"
                                    @click="showProjectDetails(document)">文档详情</el-button>
                                <el-button type="danger" size="small" class="el-button-3"
                                    @click="deleteDocument(document)">删除文档</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else class="empty-project-message">
                <img src="../assets/Picture/ProjectManagement/emptybox.png" alt=" " class="empty-box blurred">
                <p class="blurred">文档列表为空，快去新建一个文档吧！</p>
            </div>
        </div>
        <!-- 添加查看文档详情窗口 -->
        <transition name="fade">
            <div class="project-detail-modal" v-if="showProjectDetailModal">
                <div class="create-project-modal-content">
                    <div class="cpc-head">
                        <h3>文档详情</h3>
                        <img src="../assets/Picture/ProjectManagement/x.png" alt=" " class="cpc-x"
                            @click="toggleProjectDetailModal">
                    </div>

                    <div class="pdm-body">
                        <div class="project-name">
                            <div class="projectName">名称*</div>
                            <input type="text" v-model="currentProject.name">
                        </div>
                        <div class="project-description">
                            <div class="projectDescription">文档描述</div>
                            <textarea v-model="currentProject.description"></textarea>
                        </div>
                        <div class="project-created-at">
                            <div class="p-creat-time">文档创建时间</div>
                            <input type="text" v-model="currentProject.createdAt" disabled class="project-crated-input">
                        </div>
                        <div class="project-updated-at">
                            <div class="p-update-time">文档更新时间</div>
                            <input type="text" v-model="currentProject.updatedAt" disabled
                                class="project-updated-input">
                        </div>
                    </div>

                    <div class="buttons">
                        <button @click="toggleProjectDetailModal">关闭</button>
                        <button @click="updateProjectDetail">更新文档详情</button>
                    </div>
                </div>
            </div>
        </transition>
        <!-- 导入文档窗口 -->
        <transition name="fade">
            <div class="document-import-modal" v-if="showImportDocumentModal">
                <div class="document-import-modal-content">
                    <div class="cpc-head">
                        <h3>导入文档</h3>
                        <img src="../assets/Picture/ProjectManagement/x.png" alt=" " class="cpc-x"
                            @click="toggleImportDocumentModal">
                    </div>
                    <form id="uploadForm" enctype="multipart/form-data" @submit.prevent="uploadFile">
                        <div class="file-upload-container">
                            <input type="file" id="fileInput" name="file"
                                accept=".doc,.docx,.pdf,.txt,.md,.html,.odt,.rtf,application/json" />
                            <div class="supported-formats">
                                <h4>支持的文件格式</h4>
                                <ul>
                                    <li><span class="format-badge">Word文档</span> .doc, .docx</li>
                                    <li><span class="format-badge">文本文件</span> .txt, .md, .html, .rtf</li>
                                    <li><span class="format-badge">数据文件</span> .json</li>
                                    <li><span class="format-badge text-muted">PDF (暂不支持)</span> .pdf</li>
                                </ul>
                                <p class="format-note">所有文件内容将被转换为标准化的HTML格式</p>
                            </div>
                        </div>
                        <div class="form-buttons">
                            <button type="button" class="cancel-button" @click="toggleImportDocumentModal">取消</button>
                            <button type="button" class="upload-button" @click="uploadFile">上传文件</button>
                        </div>
                    </form>
                </div>
            </div>
        </transition>
        <!-- 新建文档对话框 -->
        <el-dialog v-model="dialogVisible" title="新建文档" width="60%" :close-on-click-modal="false">
            <el-form label-width="100px">
                <el-form-item label="文档名称" required>
                    <el-input v-model="newDocument.name" placeholder="请输入文档名称"></el-input>
                </el-form-item>
                <el-form-item label="文档描述">
                    <el-input v-model="newDocument.description" type="textarea" rows="4"
                        placeholder="请输入文档描述"></el-input>
                </el-form-item>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="createDocument" :loading="submitLoading">
                        创建
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { computed, ref, onMounted, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import HomeView from '@/views/HomeView.vue'
import axios from '@/plugins/axios'
import mammoth from 'mammoth'
import { ElLoading, ElMessage } from 'element-plus'

// 获取路由和路由参数
const route = useRoute()
// 来执行导航操作、访问路由历史记录、以及其他与路由相关的功能
const router = useRouter()

// 获取URL中的项目ID和项目名称
const projectId = computed(() => route.params.projectId)
console.log('项目ID：', projectId.value)
const projectName = computed(() => route.params.projectName)
console.log('项目名称：', projectName.value)
const projectDescription = computed(() => route.params.projectDescription)

onMounted(() => {
    // 如果有项目ID，则获取文档列表
    if (projectId.value) {
        console.log('项目ID：', projectId.value)
        getDocumentList(projectId.value)
    } else {
        console.error('未找到项目ID，无法获取文档列表')
    }
})

// 获取文档列表
const getDocumentList = async () => {
    console.log('项目id', projectId.value)
    try {
        // 显示加载状态
        loading.value = true

        const response = await axios.get('/get_document_list', {
            params: {
                projectId: String(projectId.value)
            }
        })

        // 解析文档列表
        let documentList = []
        if (response.data.code === 200) {
            // 确保响应数据是数组
            if (Array.isArray(response.data.data)) {
                documentList = response.data.data.map(doc => ({
                    ...doc,
                    formattedDate: formatDate(new Date(doc.createdAt).getTime())
                }))
            } else {
                console.error('文档列表数据格式不正确:', response.data)
            }
            ElMessage.success(response.data.message)
            documents.value = documentList
            console.log('文档列表:', documents.value)
            // 将文档列表保存到本地存储
            localStorage.setItem(`defaultDocs-${projectId.value}`, JSON.stringify(documents.value))
        } else {
            ElMessage.error(response.data.message)
        }
    } catch (error) {
        console.error('获取文档列表失败:', error)
        ElMessage.error('获取文档列表失败，请检查网络连接')
    } finally {
        // 隐藏加载状态
        loading.value = false
    }
}

// 从本地存储获取默认文档
const getDefaultDocumentsFromStorage = (projectId) => {
    const storedDocs = localStorage.getItem(`defaultDocs-${projectId}`)
    if (storedDocs) {
        try {
            return JSON.parse(storedDocs)
        } catch (e) {
            console.error('解析默认文档失败:', e)
            return null
        }
    }
    return null
}

// 返回项目列表
const returnToProjects = () => {
    router.push({ name: 'ProjectManagement' })
}

// 添加loading状态
const loading = ref(false)

const documents = ref([])
// 控制模态窗口的显示和隐藏
// const showCreateProjectModal = ref(true)
const showProjectDetailModal = ref(false)
const showImportDocumentModal = ref(false)

// 新项目表单数据
// const newProjectName = ref('1')
// const newProjectDescription = ref('1')

// 当前项目详情
const currentProject = ref({})

// 显示项目详情模态框
const showProjectDetails = (project) => {
    currentProject.value = { ...project }
    toggleProjectDetailModal()
}

// 更新文档详情
const updateProjectDetail = async () => {
    try {
        console.log('更新文档详情:', currentProject.value)

        // 确保有文档ID
        if (!currentProject.value.id) {
            ElMessage.error('文档ID不存在，无法更新文档详情')
            return
        }

        // 发送请求到后端API
        const response = await axios.put(`/update_document`, {
            id: currentProject.value.id,
            name: currentProject.value.name,
            description: currentProject.value.description
        })

        // 处理响应
        if (response.data.code === 200) {
            ElMessage.success('文档详情更新成功')

            // 关闭模态窗口
            toggleProjectDetailModal()

            // 刷新文档列表
            getDocumentList()
        } else {
            ElMessage.error(response.data.message || '更新文档详情失败，请稍后重试')
        }
    } catch (error) {
        console.error('更新文档详情失败:', error)
        ElMessage.error('更新文档详情请求失败，请检查网络连接')
    }
}

const toggleProjectDetailModal = () => {
    showProjectDetailModal.value = !showProjectDetailModal.value
}
const toggleImportDocumentModal = () => {
    showImportDocumentModal.value = !showImportDocumentModal.value
}

// 打开导入文档模态框
const importDocument = () => {
    toggleImportDocumentModal()
}

// 格式化日期
const formatDate = (timestamp) => {
    const date = new Date(timestamp)
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')
    return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`
}
// 获取文档详情，跳转至文档详情页面
const navigateToDocumentManagementView = (document) => {
    router.push({
        name: 'DocumentDetails',
        params: {
            documentId: document.id,
            projectId: projectId.value,
            projectName: projectName.value,
            projectDescription: projectDescription.value
        }
    })
}
// 动态设置导航栏文本
const navText = computed(() => {
    if (route.name === 'DocumentManagement') {
        return '文档'
    } else {
        return '项目'
    }
})
// 上传文件
const uploadFile = (event) => {
    event.preventDefault();

    const fileInput = document.getElementById('fileInput');
    const files = fileInput.files;

    if (files.length !== 1) {
        ElMessage.error('请选择一个文件');
        return;
    }

    const file = files[0];
    const now = new Date();
    const fileExtension = file.name.split('.').pop().toLowerCase();

    // 设置加载状态
    const loadingInstance = ElLoading.service({
        fullscreen: true,
        text: '文档转换中...'
    });

    // 根据文件类型选择处理方法
    if (['doc', 'docx'].includes(fileExtension)) {
        processDocxFile(file, now, loadingInstance);
    } else if (['txt', 'md', 'html', 'rtf', 'json'].includes(fileExtension)) {
        processTextFile(file, now, loadingInstance);
    } else if (fileExtension === 'pdf') {
        ElMessage.error('暂不支持PDF文件格式，请转换为DOC或DOCX格式后上传');
        loadingInstance.close();
    } else {
        ElMessage.error('不支持的文件格式');
        loadingInstance.close();
    }
};

// 处理Word文档
const processDocxFile = (file, now, loadingInstance) => {
    const reader = new FileReader();
    reader.onload = (e) => {
        const arrayBuffer = e.target.result;

        // 使用mammoth将docx转换为HTML
        mammoth.convertToHtml({ arrayBuffer })
            .then(result => {
                console.log('word文档转化为html内容：', result.value)
                const htmlContent = normalizeHtml(result.value);
                uploadToServer(file, htmlContent, now, loadingInstance);
            })
            .catch(error => {
                loadingInstance.close();
                console.error('文档转换失败:', error);
                ElMessage.error('文档转换失败，请检查文件格式');
            });
    };
    reader.readAsArrayBuffer(file);
};

// 处理文本文件
const processTextFile = (file, now, loadingInstance) => {
    const reader = new FileReader();
    reader.onload = (e) => {
        let content = e.target.result;
        let htmlContent = '';

        const fileExtension = file.name.split('.').pop().toLowerCase();

        if (fileExtension === 'html') {
            // 如果是HTML文件，直接规范化内容
            htmlContent = normalizeHtml(content);
        } else if (fileExtension === 'json') {
            try {
                // 尝试解析JSON
                const jsonObj = JSON.parse(content);
                // 假设JSON中有content字段
                if (jsonObj.content) {
                    content = jsonObj.content;
                } else {
                    // 否则使用字符串化的JSON
                    content = JSON.stringify(jsonObj, null, 2);
                }
            } catch (error) {
                console.error('JSON解析失败:', error);
                // 如果解析失败，使用原始内容
            }
            // 将文本内容转换为HTML
            htmlContent = textToHtml(content);
        } else {
            // 对于txt, md, rtf等文本文件，直接转换
            htmlContent = textToHtml(content);
        }

        uploadToServer(file, htmlContent, now, loadingInstance);
    };

    if (['json', 'html', 'txt', 'md'].includes(file.name.split('.').pop().toLowerCase())) {
        reader.readAsText(file);
    } else {
        // 对于rtf等其他格式，可能需要二进制读取
        reader.readAsText(file);
    }
};

// 将普通文本转换为HTML
const textToHtml = (text) => {
    // 按行分割
    const lines = text.split(/\r?\n/);
    let html = '';

    lines.forEach(line => {
        if (line.trim()) {
            html += `<p>${line}</p>`;
        } else {
            html += `<p><br/></p>`;
        }
    });

    return html;
};

// 规范化HTML，只保留p和br标签
const normalizeHtml = (html) => {
    // 创建一个临时DOM元素来解析HTML
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = html;

    // 用于存储规范化后的HTML片段
    let normalizedHtml = '';

    // 标记是否需要添加段落分隔符
    let needSeparator = false;

    // 递归处理DOM节点
    const processNode = (node) => {
        // 文本节点直接添加到当前段落
        if (node.nodeType === Node.TEXT_NODE) {
            const text = node.textContent.trim();
            if (text) {
                // 如果有文本内容，创建段落
                if (needSeparator) {
                    normalizedHtml += '<p><br/></p>';
                    needSeparator = false;
                }
                normalizedHtml += `<p>${text}</p>`;
                needSeparator = true;
            }
        } else if (node.nodeType === Node.ELEMENT_NODE) { // 元素节点根据类型处理
            // 如果是p标签，保留它
            if (node.nodeName.toLowerCase() === 'p') {
                if (needSeparator) {
                    normalizedHtml += '<p><br/></p>';
                    needSeparator = false;
                }

                // 获取p标签内的文本，并处理内部的br标签
                let pContent = '';
                for (const childNode of node.childNodes) {
                    if (childNode.nodeType === Node.TEXT_NODE) {
                        pContent += childNode.textContent;
                    } else if (childNode.nodeName.toLowerCase() === 'br') {
                        pContent += '<br/>';
                    } else {
                        // 其他元素节点当作文本处理
                        pContent += childNode.textContent;
                    }
                }

                // 如果p标签内有内容，则添加
                if (pContent.trim()) {
                    normalizedHtml += `<p>${pContent}</p>`;
                    needSeparator = true;
                }
            } else if (node.nodeName.toLowerCase() === 'br') { // 如果是br标签，在当前位置添加段落分隔符
                normalizedHtml += '<p><br/></p>';
                needSeparator = false;
            } else if (/^h[1-6]$|^(div|section|article|header|footer|main|aside|blockquote)$/i.test(node.nodeName)) { // 对于标题标签(h1-h6)、div、section等块级元素，转换为p标签并添加分隔符
                if (needSeparator) {
                    normalizedHtml += '<p><br/></p>';
                    needSeparator = false;
                }

                const text = node.textContent.trim();
                if (text) {
                    normalizedHtml += `<p>${text}</p>`;
                    needSeparator = true;
                }
            } else if (node.nodeName.toLowerCase() === 'li') { // 对于列表项，每个都转换为单独的p标签
                if (needSeparator) {
                    normalizedHtml += '<p><br/></p>';
                    needSeparator = false;
                }

                const text = node.textContent.trim();
                if (text) {
                    normalizedHtml += `<p>${text}</p>`;
                    needSeparator = true;
                }
            } else { // 对于其他元素，递归处理其子节点
                // 递归处理所有子节点
                for (const childNode of node.childNodes) {
                    processNode(childNode);
                }
            }
        }
    };

    // 处理所有顶级节点
    for (const childNode of tempDiv.childNodes) {
        processNode(childNode);
    }

    // 确保HTML不为空
    if (!normalizedHtml.trim()) {
        // 如果没有提取到内容，回退到之前的纯文本方法
        const textContent = tempDiv.textContent;
        const paragraphs = textContent.split(/\n\s*\n/).map(p => p.trim()).filter(p => p);

        paragraphs.forEach((paragraph, index) => {
            const paragraphWithBr = paragraph.replace(/\n/g, '<br/>');
            normalizedHtml += `<p>${paragraphWithBr}</p>`;

            if (index < paragraphs.length - 1) {
                normalizedHtml += `<p><br/></p>`;
            }
        });
    }

    return normalizedHtml;
};

// 上传到服务器
const uploadToServer = (file, htmlContent, now, loadingInstance) => {
    fetch('/document/upload', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            documentId: `doc-${now.getTime()}`,
            projectId: projectId.value,
            name: file.name,
            content: htmlContent,
            description: 'Converted document',
            createdAt: formatDateForBackend(now),
            updatedAt: formatDateForBackend(now)
        })
    })
        .then(async response => {
            loadingInstance.close();
            const data = await response.json();
            if (data.success) {
                ElMessage.success('上传成功');
                await getDocumentList();
                toggleImportDocumentModal();
            } else {
                ElMessage.error('上传失败');
                console.error('Upload failed:', data);
                toggleImportDocumentModal();
            }
        })
        .catch(error => {
            loadingInstance.close();
            console.error('Upload failed:', error);
            ElMessage.error('上传失败，请检查网络连接');
        });
};
// 导航到知识图谱和导出界面
const analyzeAndExport = () => {
    router.push({
        name: 'KnowledgeGraphView',
        params: { documentId: documents.value[0].documentId }
    })
}

// 新增文档对话框相关状态
const dialogVisible = ref(false)
const newDocument = reactive({
    name: '',
    description: ''
})
// 创建文档loading状态
const submitLoading = ref(false)

// 打开新建文档对话框
const openCreateDocumentDialog = () => {
    newDocument.name = ''
    newDocument.description = ''
    dialogVisible.value = true
}

// 创建新文档
const createDocument = async () => {
    // 表单验证
    if (!newDocument.name.trim()) {
        ElMessage.warning('文档名称不能为空')
        return
    }

    if (!projectId.value) {
        ElMessage.error('缺少项目ID，无法创建文档')
        return
    }

    submitLoading.value = true
    // 创建文档对象
    const now = new Date()
    const newDoc = {
        id: `doc-${now.getTime()}`,
        projectId: projectId.value,
        projectName: projectName.value,
        projectDescription: projectDescription.value,
        name: newDocument.name,
        description: newDocument.description || '暂无',
        content: '',
        createdAt: new Date(now).toISOString(),
        updatedAt: new Date(now).toISOString(),
        formattedDate: formatDateForBackend(now)
    }

    try {
        // 尝试发送创建文档请求
        const response = await axios.post('/create_document', {
            documentId: newDoc.id,
            projectId: projectId.value,
            name: newDocument.name.trim(),
            content: '',
            description: newDocument.description || '暂无',
            createdAt: newDoc.formattedDate,
            updatedAt: newDoc.formattedDate
        })

        // 处理响应
        if (response.data.success) {
            ElMessage.success(response.data.message)
            // 结束加载状态
            submitLoading.value = false
            // 关闭对话框
            dialogVisible.value = false
            // 将文档添加到documents列表中
            documents.value.unshift(newDoc)
            // 保存到本地存储，确保刷新后不丢失
            const storedDocs = getDefaultDocumentsFromStorage(projectId.value) || []
            storedDocs.unshift(newDoc)
            localStorage.setItem(`defaultDocs-${projectId.value}`, JSON.stringify(storedDocs))
            // 刷新文档列表
            await getDocumentList(projectId.value)
        } else {
            ElMessage.error(response.data.message)
            // 结束加载状态
            submitLoading.value = false
            // 关闭对话框
            dialogVisible.value = false
        }
    } catch (apiError) {
        console.error('创建文档失败:', apiError)
    }
}
// 添加一个新的日期格式化函数，专门用于后端请求
const formatDateForBackend = (date) => {
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
// 删除文档
const deleteDocument = async (document) => {
    // 向后端发送删除请求
    try {
        // 从本地存储中删除文档
        const storedDocs = getDefaultDocumentsFromStorage(projectId.value) || [];
        const updatedDocs = storedDocs.filter(doc => doc.id !== document.id);
        localStorage.setItem(`defaultDocs-${projectId.value}`, JSON.stringify(updatedDocs));

        // 从 documents 数组中删除文档
        documents.value = documents.value.filter(doc => doc.id !== document.id);
        const response = await fetch(`/document/delete/${document.id}`, {
            method: 'DELETE'
        });
        const data = await response.json();
        if (data.success) {
            ElMessage.success('文档删除成功' || data.message);
        } else {
            ElMessage.error('文档删除失败' || data.message);
        }
    } catch (error) {
        console.error('删除文档失败:', error);
        ElMessage.error('删除文档请求失败，请检查网络连接');
    }
};
</script>

<style scoped>
*,
*:before,
*:after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.project-management-container {
    margin-top: 55px;
    height: 100vh;
    width: 100%;
    background-color: #f5f5f5;
    padding: 20px;
}

.pmc-head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;

    width: 100%;
    padding: 20px;
    border-bottom: 1px solid rgb(247, 247, 247);
    border-radius: 10px;
    user-select: none;

}

.pmc-box {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.pmc-left-head {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pmc-right-head {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pmc-small-head h2 {
    font-family: 'Arial', sans-serif;
    /* 字体系列 */
    font-size: 24px;
    /* 字体大小 */
    font-weight: bold;
    /* 加粗 */
    color: #333333;
    /* 字体颜色 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    /* 阴影效果 */
    text-decoration: none;
    /* 去掉下划线 */
    transition: color 0.3s ease;
    /* 过渡效果 */
}

.pmc-small-head h2:hover {
    color: #007BFF;
    /* 鼠标悬停时的颜色 */
}

.pmc-small-right-head {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.pmc-small-left-head span {
    padding-left: 10px;
}

.pmc-body {
    background: #ffffff;
    width: 100%;
    height: 90%;
    padding: 20px;
    border-bottom: 1px solid rgb(247, 247, 247);
    border-radius: 10px;
    user-select: none;

}

.empty-project-message {
    width: 100%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.empty-box {
    width: 150px;
    height: 150px;
    object-fit: contain;
    margin-bottom: 30px;
}

.blurred {
    filter: grayscale(100%);
    opacity: 0.2;
    /* 可选：调整透明度 */
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin-bottom: 10px;
}

.create-project-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.create-project-modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    width: 80%;
    max-width: 600px;
}

.document-import-modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    width: 80%;
    max-width: 600px;
}

.cpc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Arial', sans-serif;
    /* 字体系列 */
    font-size: 18px;
    /* 字体大小 */
    font-weight: bold;
    /* 加粗 */
    color: #333333;
    /* 字体颜色 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    /* 阴影效果 */
    text-decoration: none;
    /* 去掉下划线 */
    transition: color 0.3s ease;
    /* 过渡效果 */
}

.cpc-head h3:hover {
    color: #007BFF;
    /* 鼠标悬停时的颜色 */
}

.cpc-x {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.project-name,
.project-description {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0px 20px 0px;

    font-family: 'Arial', sans-serif;
    /* 字体系列 */
    font-size: 15px;
    /* 字体大小 */
    color: #555555;
    /* 字体颜色 */
    text-decoration: none;
    /* 去掉下划线 */
    transition: color 0.3s ease;

}

.project-name input {
    display: inline-block;
    width: 100%;
    min-height: 50px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    overflow-y: auto;

}

.project-description textarea {
    display: inline-block;
    width: 100%;
    min-height: 50px;
    min-width: 85%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    overflow-y: auto;
}

.projectName,
.projectDescription {
    width: 15%;
    margin-right: 10px;
}

.buttons {
    display: flex;
    justify-content: flex-end;
}

.buttons button {
    margin-left: 10px;
}

.buttons button:first-child {
    background-color: #f6f6f6;
    color: #262626;
}

.buttons button:first-child:hover {
    background-color: #cccccc;
}

button {
    padding: 10px 20px;
    background-color: #333333;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;

}

button:hover {
    background-color: #666666;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.pmc-item-container {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-top: 10px;
    padding-bottom: 10px;

}

.pmc-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-top: 10px;
    padding-bottom: 10px;

}

.pmc-left-item {
    display: flex;
    justify-content: start;
    align-items: center;
}

.pmc-right-item {
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.pmc-image img {
    width: 20px;
    height: 20px;
    object-fit: contain;

}

.pmc-image {
    margin: 0px 5px 0px 0px;
}

.pmc-name {
    font-family: 'Arial', sans-serif;
    /* 字体系列 */
    font-size: 14px;
    /* 字体大小 */
    font-weight: bold;
    /* 加粗 */
    color: #333333;
    /* 字体颜色 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    /* 阴影效果 */
    text-decoration: none;
    /* 去掉下划线 */
    transition: color 0.3s ease;
    /* 过渡效果 */
    margin-left: 5px;
    margin-right: 20px;
    padding-bottom: 3px;
}

.pmc-description {
    font-family: 'Arial', sans-serif;
    /* 字体系列 */
    font-size: 10px;
    /* 字体大小 */
    color: #666666;
    /* 字体颜色 */
    text-decoration: none;
    /* 去掉下划线 */
    margin: 0px 0px 0px 0px;
}

.pmc-date {
    font-family: 'Arial', sans-serif;
    /* 字体系列 */
    font-size: 10px;
    /* 字体大小 */
    color: #666666;
    /* 字体颜色 */
    text-decoration: none;
    /* 去掉下划线 */
    padding: 0px 5px 3px 5px;
}

.el-button-1 {
    background-color: #4caf50;
    border-color: #4caf50;
    margin-left: 20px;
}

.el-button-2 {
    background-color: #909399;
    border-color: #909399;

}

.el-button-3 {
    background-color: #F56C6C;
    border-color: #F56C6C;

}

.project-detail-modal {
    display: flex;
    /* 或其他合适的显示方式 */
    position: fixed;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.document-import-modal {
    display: flex;
    /* 或其他合适的显示方式 */
    position: fixed;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.project-detail-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 8px;
}

.project-created-at,
.project-updated-at {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    margin: 20px 0px 20px 0px;

    font-family: 'Arial', sans-serif;
    /* 字体系列 */
    font-size: 15px;
    /* 字体大小 */
    color: #555555;
    /* 字体颜色 */
    text-decoration: none;
    /* 去掉下划线 */
    transition: color 0.3s ease;
}

.p-creat-time,
.p-update-time {
    margin-right: 10px;
}

.project-crated-input,
.project-updated-input {
    width: 82%;
    cursor: not-allowed;
}

.file-upload-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 10px;
}

.supported-formats {
    margin-top: 20px;
    text-align: center;
}

.supported-formats h4 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.supported-formats ul {
    list-style: none;
    padding: 0;
}

.supported-formats li {
    margin-bottom: 5px;
}

.format-badge {
    background-color: #4caf50;
    color: white;
    padding: 2px 5px;
    border-radius: 3px;
}

.format-note {
    margin-top: 10px;
    font-size: 12px;
    color: #666;
}

.form-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.cancel-button,
.upload-button {
    padding: 10px 20px;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 10px;
}

.cancel-button:hover,
.upload-button:hover {
    background-color: #666;
}

.text-muted {
    background-color: #999;
}

#fileInput {
    margin: 15px 0;
    padding: 10px;
    border: 2px dashed #ccc;
    border-radius: 5px;
    width: 100%;
    max-width: 400px;
}

#fileInput:hover {
    border-color: #4caf50;
}
</style>
